<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
    <head>
        <!-- 指定字符集 -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>修改用户</title>

        <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
        <script src="${pageContext.request.contextPath}/js/jquery-2.1.0.min.js"></script>
        <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
        
    </head>
    <body>
        <div class="container" style="width: 400px;">
        <h3 style="text-align: center;">修改商品</h3>
        <form action="${pageContext.request.contextPath}/category/update" method="post">
            <!--  隐藏域 提交id-->
            <input type="hidden" name="id" value="${shop.id}">
          <div class="form-group">
            <label for="name">名称：</label>
            <input type="text" class="form-control" id="name" name="name"  value="${shop.name}"  placeholder="请输入名称" />
          </div>
            <label for="pid_level1">一级</label>
            <input type="radio" id="pid_level1" name="pid" value="${shop.pid}" checked>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label for="pid_level2">二级</label>
            <input type="radio" id="pid_level2" name="pid" value="${shop.pid}"><br>
            <div class="form-group" id="pictureGroup">
                <label for="pid">分类：</label>
                <select name="pid" class="form-control" id="pid">
                    <c:forEach items="${pCategory}" var="pid" varStatus="status">
                        <option value="${pid.id}">${pid.name}</option>
                    </c:forEach>
                </select>
                <label for="picture">图片：</label>
                <input type="text" class="form-control" id="picture" name="picture" value="${shop.picture}" placeholder="请输入图片"/>
            </div>

             <div class="form-group" style="text-align: center">
                <input class="btn btn-primary" type="submit" value="提交" />
                <input class="btn btn-default" type="reset" value="重置" />
                <input class="btn btn-default" type="button" value="返回"/>
             </div>
        </form>
        </div>
    </body>
    <script>
        $(document).ready(function () {
            // 初始时，如果选中了一级，则隐藏图片输入框
            if ($('#pid_level1').is(':checked')) {
                $('#pictureGroup').hide();
            }
            // 监听单选按钮的变化
            $('input[name="pid"]').change(function () {
                if ($(this).val() === '0') { // 如果选中了一级
                    $('#pictureGroup').hide();
                } else { // 如果选中了二级
                    $('#pictureGroup').show();
                }
            });
        });
    </script>
</html>